<template>
  <div class="dashboard">
    <el-form inline :model="searchForm" class="search px-10 mt-10">
      <el-form-item label="日期:" prop="dateRange">
        <el-date-picker
          :disabled-date="disableFutureDates"
          v-model="searchForm.dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="周期:" prop="period">
        <el-button
          :type="searchForm.period === value ? 'primary' : ''"
           @click="setValue(value)"
          v-for="value in periods"
          :key="value"
          >{{ value }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-button @click="resetForm"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <div class="chart-containers px-10">
      <!-- 总览 -->
      <div class="container-item p-10">
        <p class="title">总览</p>
        <div class="overview">
          <div class="view-item" v-for="item in overviewArr" :key="item.title">
            <span class="view-title">{{ item.title }}:</span>
            <span class="view-value">{{ item.value }}</span>
          </div>
        </div>
      </div>

      <div class="container-item p-10">
        <p class="title">慢病随访数据</p>
        <div class="d-flex">
          <!-- 病种分布 -->
          <div id="disease-distribute" class="w-40p"></div>
          <!-- 满意度数据 -->
          <div id="satisfy-chart" class="w-60p"></div>
        </div>
      </div>
      <div class="container-item p-10">
        <p class="title">健康体检数据</p>
        <div class="d-flex">
          <!-- 人群分布 -->
          <div id="crew-chart" class="w-50p"></div>
          <!-- 年龄分布 -->
          <div id="age-chart" class="w-50p"></div>
        </div>
      </div>
      <div class="container-item p-10">
        <p class="title">采集回填统计</p>
        <div id="back-fill-statistic"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 ECharts
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import http from "@/utils/request";
let chartMap = {};
const disableFutureDates = (time) => time > new Date();
const initSvgChart = (selector) => {
  return echarts.init(document.getElementById(selector), null, {
    renderer: "svg",
  });
};
export default {
  data() {
    return {
      periods: [
        "全部",
        "今日",
        "昨日",
        "本周",
        "本月",
        "上月",
        "本季度",
        "近半年",
      ],
      overviewArr: [
      ],
      searchForm: {
        dateRange: [],
        period: "全部",
      },
    };
  },
  methods: {
    disableFutureDates,
    resetForm(){
      this.searchForm={dateRange:[],period:"全部"}
    },
    setValue(value){
      console.log(value);
      if(value!=="全部"){
        this.searchForm.dateRange = []
      }
     this.searchForm.period = value;
     this.searchData();
    },
    searchData() {
      const { dateRange, period } = this.searchForm;
      const [beginDate, endDate] = dateRange;
      const params = {
        beginDate,
        endDate,
        date: period,
      };
      http.post("/admin/homePage/getList", params).then((res) => {
        if (res.code === 200) {
          const resDate = res.data;
          // 总览数据
          const overviewArr = [
            {
              title: "系统用户",
              value: `${resDate.systemUserCount}个`,
            },
            {
              title: "HIS账号",
              value: `${resDate.hisAccountCount}个`,
            },
            {
              title: "机构",
              value: `${resDate.organizationCount}个`,
            },
            {
              title: "科室",
              value: `${resDate.departmentCount}个`,
            },
            {
              title: "居民库",
              value: `${resDate.residentRepositoryCount}条`,
            },
            {
              title: "药品目录",
              value: `${resDate.drugCatalogCount}条`,
            },
            {
              title: "随访记录",
              value: `${resDate.followUpRecordCount}条`,
            },
            {
              title: "体检记录",
              value: `${resDate.healthCheckupRecordCount}条`,
            },
          ];
          this.overviewArr = overviewArr;
          // 慢病随访数据 饼图
          const valueArr = [
            resDate.chronicDiseaseHypertensionCount,
            resDate.chronicDiseaseDiabetesCount,
            resDate.chronicDiseaseHighSugarCount,
          ];
          const responseObj = [
            {
              value: `${resDate.followUpRecordCount}`,
              name: "总人数",
            },
            { value: valueArr[0], name: "高血压" },
            { value: valueArr[1], name: "糖尿病" },
            { value: valueArr[2], name: "高糖" },
          ];
          //血压控制满意数组
          const satisfactionArr = [
            resDate.chronicDiseaseHypertensionSatisfiedCount,
            resDate.chronicDiseaseDiabetesHypertensionSatisfiedCount,
            resDate.chronicDiseaseHighSugarHypertensionSatisfiedCount,
          ];
          //血压控制不满意数组
          const unsatisfactionArr = [
            resDate.chronicDiseaseHypertensionUnsatisfiedCount,
            resDate.chronicDiseaseDiabetesHypertensionUnsatisfiedCount,
            resDate.chronicDiseaseHighSugarHypertensionUnsatisfiedCount,
          ];
          //血糖控制满意数组
          const bloodSugarSatisfactionArr = [
            null,
            resDate.chronicDiseaseDiabetesSatisfiedCount,
            resDate.chronicDiseaseHighSugarDiabetesSatisfiedCount,
          ];
          //血糖控制不满意数组
          const bloodSugarUnsatisfactionArr = [
            null,
            resDate.chronicDiseaseDiabetesUnsatisfiedCount,
            resDate.chronicDiseaseHighSugarDiabetesUnsatisfiedCount,
          ];
          this.initHealthCheckChart(responseObj);
          //慢病随访数据  柱状图
          this.initSatisficationChart([
            valueArr,
            satisfactionArr,
            unsatisfactionArr,
            bloodSugarSatisfactionArr,
            bloodSugarUnsatisfactionArr,
          ]);

          // 采集回填统计
          //采集回填总数数组
          const backFillArr = [
            resDate.healthManageCollectHuiTianTotal,
            resDate.checkUpCollectHuiTianTotal,
            resDate.chronicDiseaseCollectHuiTianTotal,
          ];
          //采集成功数组
          const backFillSuccessArr = [
            null,
            resDate.healthCheckupCollectSuccess,
            resDate.chronicDiseaseCollectSuccess,
          ];
          //采集失败数组
          const backFillFailArr = [
            null,
            resDate.healthCheckupCollectFailure,
            resDate.chronicDiseaseCollectFailure,
          ];
          //未采集数组
          const backFillNoArr = [
            null,
            resDate.healthCheckupNotCollected,
            resDate.chronicDiseaseNotCollected,
          ];
          //回填成功数组
          const backFillSuccessRateArr = [
            resDate.healthManageBackFillingSuccess,
            resDate.healthCheckupBackFillingSuccess,
            resDate.chronicDiseaseBackFillingSuccess,
          ];
          //回填失败数组
          const backFillFailRateArr = [
            resDate.healthManageBackFillingFailure,
            resDate.healthCheckupBackFillingFailure,
            resDate.chronicDiseaseBackFillingFailure,
          ];
          //未回填数组
          const backFillNoRateArr = [
            resDate.healthManageNotBackFilled,
            resDate.healthCheckupNotBackFilled,
            resDate.chronicDiseaseNotBackFilled,
          ];
          //已人工回填数组
          const backFillManualArr = [
          resDate.healthManageNotManuallyProcessed,
            resDate.healthCheckupManuallyProcessed,
           resDate.chronicDiseaseManuallyProcessed,
          ];

          this.initBackFillStatisticsChart([
            backFillArr,
            backFillSuccessArr,
            backFillFailArr,
            backFillNoArr,
            backFillSuccessRateArr,
            backFillFailRateArr,
            backFillNoRateArr,
            backFillManualArr
          ]);
          //健康体检数据
             //年龄总人数数组
             const ageTotalArr = [
             { value: resDate.ageTotalPopulationCount, name: "总人数" }
            ];
            //年龄分类数组
            const ageArr = [
              { value: resDate.population65AndAbovePercentageCount, name: "65岁及以上人群" },
              { value: resDate.population40To64PercentageCount, name: "40-64岁人群" },
              { value: resDate.population18To39PercentageCount, name: "18-39岁人群" },
              { value: resDate.populationBelow18PercentageCount, name: "18岁以下人群" },
            ]
            this.initAgeChart([ageTotalArr,ageArr]);

            //人群分布
             //高糖人群
             const highSugarArr = [
             { value: resDate.highSugarPopulationPercentageCount, name: "高糖人群" },
              { value: resDate.nonHighSugarPopulationPercentageCount, name: "非高糖人群" },
            ];
            //糖尿病人群
            const diabetesArr = [
             { value: resDate.diabetesPopulationPercentageCount, name: "糖尿病人群" },
              { value: resDate.nonDiabetesPopulationPercentageCount, name: "非糖尿病人群" },  
            ];
            //高血压人群
            const hypertensionArr = [
             { value: resDate.hypertensionPopulationPercentageCount, name: "高血压人群" },
              { value: resDate.nonHypertensionPopulationPercentageCount, name: "非高血压人群" },
            ];
            //高龄人群
            const oldAgeArr = [
             { value: resDate.elderlyPercentageCount, name: "老年人" },
              { value: resDate.belowPercentageCount, name: "非老年人" },
            ];
            this.initCrewChart([ageTotalArr,highSugarArr,diabetesArr,hypertensionArr,oldAgeArr]);
        }
      });
    },

    /**
     * 慢病随访数据 --- 病种分布图
     */
    initHealthCheckChart(responseObj) {
      const [totalData, ...otherData] = responseObj;

      // const chart = initSvgChart("disease-distribute");
      const chartId = 'disease-distribute';
			const chart = chartMap[chartId] || initSvgChart(chartId);
      chartMap[chartId] = chart;
      const option = {
        tooltip: {},
        title: {
          text: "病种分布", // 设置标题内容
          left: 55, // 标题居中
          bottom: 20, // 设置标题位置在饼图的底部
          textStyle: {
            fontSize: 16, // 设置字体大小
            fontWeight: "bold",
          },
        },
        legend: {
          orient: "vertical", // 图例垂直排列
          right: "20%", // 图例放置在右侧
          top: "middle", // 图例垂直居中
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"], // 设置第一个饼图的半径，使其更大
            center: ["25%", "50%"], // 设置第一个饼图的位置，使其居中
            data: [totalData],
            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 3, // 设置边框宽度
              borderColor: "#fff", // 设置边框颜色，使两个饼图有明显的分隔线
            },
          },
          {
            type: "pie",
            radius: ["0%", "30%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data: otherData,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
        ],
      };
      chart.setOption(option);
      console.log("initHealthCheckChart", chart);
      
    },
    /**
     * 慢病随访数据 --- 满意度统计图
     */
    initSatisficationChart(newArr) {
      const valueArr = newArr[0];
      const satisfactionArr = newArr[1];
      const unsatisfactionArr = newArr[2];
      const bloodSugarSatisfactionArr = newArr[3];
      const bloodSugarUnsatisfactionArr = newArr[4];
      // const chart = initSvgChart("satisfy-chart");
      const chartId = 'satisfy-chart';
			const chart = chartMap[chartId] || initSvgChart(chartId);
      chartMap[chartId] = chart;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
      // 过滤掉 null 或 undefined 数据项
      const filteredParams = params.filter(param => param.value !== null && param.value !== undefined);

      // 如果没有有效的数据，返回空
      if (filteredParams.length === 0) return '';

      // 否则，返回有效的数据项，并保留圆点
      return filteredParams.map(param => {
        // 获取圆点颜色（这个是系列的颜色）
        const color = param.color || "#333"; // 默认使用黑色
        return `
          <span style="display: inline-block; width: 8px; height: 8px; background-color: ${color}; margin-right: 5px; border-radius: 50%;"></span>
          ${param.seriesName}: ${param.value}
        `;
      }).join('<br/>');
    }   
        },
        legend: {
          data: [
            "总人数",
            "血压控制满意",
            "血压控制不满意",
            "血糖控制满意",
            "血糖控制不满意",
          ],
          top: "0%", // 图例放置在顶部
          left: "center", // 图例居中
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["高血压", "糖尿病", "高糖"],
          axisLine: {
            lineStyle: {
              color: "#333", // 设置X轴轴线的颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#333", // 设置Y轴轴线的颜色
            },
          },
          axisLabel: {
            formatter: "{value}", // 数值轴标签的显示格式
          },
        },
        series: [
          {
            name: "总人数",
            type: "bar",
            barMinHeight: 10,
            data: [valueArr[0], valueArr[1], valueArr[2]],
            silent: true,
     
          },
          {
            name: "血压控制满意",
            type: "bar",
            barMinHeight: 10,
            data: [satisfactionArr[0],
            null, satisfactionArr[2]],
            silent: true,
    
      
          },
          {
            name: "血压控制不满意",
            type: "bar",
            barMinHeight: 10,
            data: [
              unsatisfactionArr[0],
              null,
              unsatisfactionArr[2],
            ],
            silent: true,
      
          },
          {
            name: "血糖控制满意",
            type: "bar",
            barMinHeight: 10,
            data: [
              bloodSugarSatisfactionArr[0],
              bloodSugarSatisfactionArr[1],
              bloodSugarSatisfactionArr[2],
            ],
            silent: true,
      
          },
          {
            name: "血糖控制不满意",
            type: "bar",
            barMinHeight: 10,
            data: [
              bloodSugarUnsatisfactionArr[0],
              bloodSugarUnsatisfactionArr[1],
              bloodSugarUnsatisfactionArr[2],
            ],
            silent: true,
     
            // itemStyle: {
            //   color: "#e31a1c", // 柱状图颜色
            // },
          },
        ],
      };
      chart.setOption(option);
    },
    /**
     * 采集回填统计
     */
    initBackFillStatisticsChart(arr) {
      // const chart = initSvgChart("back-fill-statistic");
      const chartId = 'back-fill-statistic';
			const chart = chartMap[chartId] || initSvgChart(chartId);
      chartMap[chartId] = chart;
      const [
        backFillArr,
        backFillSuccessArr,
        backFillFailArr,
        backFillNoArr,
        backFillSuccessRateArr,
        backFillFailRateArr,
        backFillNoRateArr,
        backFillManualArr
      ] = arr;
      const totalArr = backFillArr; // 总数数据数组
      // 计算与总数的比值，返回一个高度比例
      const calculateHeightRatio = (dataArr, totalArr, factor = 500) => {
  return dataArr.map((data, index) => {
    // 计算数据与总数的比例，确保不会为零
    if (totalArr[index] === 0) {
      return 0; // 防止除零错误
    }
    return (data / totalArr[index]) * factor;
  });
};
// 堆叠项的高度比例
const backFillSuccessHeights = calculateHeightRatio(backFillSuccessArr, totalArr);
const backFillFailHeights = calculateHeightRatio(backFillFailArr, totalArr);
const backFillNoHeights = calculateHeightRatio(backFillNoArr, totalArr);
console.log(backFillSuccessHeights,backFillFailHeights,backFillNoHeights);


      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
      // 过滤掉 null 或 undefined 数据项
      const filteredParams = params.filter(param => param.value !== null && param.value !== undefined);

      // 如果没有有效的数据，返回空
      if (filteredParams.length === 0) return '';

      // 否则，返回有效的数据项，并保留圆点
      return filteredParams.map(param => {
        // 获取圆点颜色（这个是系列的颜色）
        const color = param.color || "#333"; // 默认使用黑色
        return `
          <span style="display: inline-block; width: 8px; height: 8px; background-color: ${color}; margin-right: 5px; border-radius: 50%;"></span>
          ${param.seriesName}: ${param.value}
        `;
      }).join('<br/>');
    }  
   
        },
        legend: {
          data: [
            "总数",
            "采集成功",
            "采集失败",
            "未采集",
            "回填成功",
            "回填失败",
            "未回填",
            "已人工回填",
          ],
          top: "0%", // 图例放置在顶部
          left: "20%", // 图例居中
         
        },
        grid: {
          left: "20%",
          right: "10%",
          bottom: "10%",
          top: "20%",
        },
        yAxis: {
          type: "category",
          data: ["体质辨识", "健康体检", "慢病随访"],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            formatter: function (value) {
              return value;
            },
          },
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false,
            formatter: "{value}",
          },
          axisLine: { show: false },
          axisTick: { show: false },
        },
        series: [
          {
            name: "总数",
            type: "bar",
            stack: "总数",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillArr[0], backFillArr[1], backFillArr[2]],
            barMinHeight:500,
   
            // data: [1, 2, 3],
          },
          {
            name: "采集成功",
            type: "bar",
            stack: "采集",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [
              backFillSuccessArr[0],
              backFillSuccessArr[1],
              backFillSuccessArr[2],
            ], // 健康管理无采集数据，置为0
       
            barMaxHeight: backFillSuccessHeights, // 计算堆叠数据的高度
          },
        
          {
            name: "采集失败",
            type: "bar",
            stack: "采集",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillFailArr[0], backFillFailArr[1], backFillFailArr[2]], // 健康管理无采集数据，置为0
            barMinHeight: 10, // 设置最小高度（如果需要）
            barMaxHeight: backFillFailHeights, // 计算堆叠数据的高度
          },
          {
            name: "未采集",
            type: "bar",
            stack: "采集",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillNoArr[0], backFillNoArr[1], backFillNoArr[2]], // 健康管理无采集数据，置为0
          
            barMaxHeight: backFillNoHeights, // 计算堆叠数据的高度
          },
          {
            name: "回填成功",
            type: "bar",
            stack: "回填",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillSuccessRateArr[0], backFillSuccessRateArr[1], backFillSuccessRateArr[2]], 
          
    barMaxHeight: 500 * calculateHeightRatio(backFillSuccessRateArr, totalArr)[0],
          },
          {
            name: "回填失败",
            type: "bar",
            stack: "回填",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillFailRateArr[0], backFillFailRateArr[1], backFillFailRateArr[2]],
            barMinHeight: 10, // 设置最小高度（如果需要）
    barMaxHeight: 500 * calculateHeightRatio(backFillFailRateArr, totalArr)[0],
          },
          {
            name: "未回填",
            type: "bar",
            stack: "回填",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillNoRateArr[0], backFillNoRateArr[1], backFillNoRateArr[2]], // 示例数据
     
            barMaxHeight: 500 * calculateHeightRatio(backFillNoRateArr, totalArr)[0],
          },
          {
            name: "已人工回填",
            type: "bar",
            stack: "回填",
            label: {
              show: true,
              color: "#fff",
              formatter({data}){
                  if(!data)return ''
                  return data
                }
            },
            data: [backFillManualArr[0], backFillManualArr[1], backFillManualArr[2]], // 示例数据
          
            barMaxHeight: 500 * calculateHeightRatio(backFillManualArr, totalArr)[0], 
          },
        ],
      };
      chart.setOption(option);
    },

    /**
     * 健康体检数据 --- 年龄分布图
     */
    initAgeChart(arr) {
      // const chart = initSvgChart("age-chart");
      const chartId = 'age-chart';
			const chart = chartMap[chartId] || initSvgChart(chartId);
      chartMap[chartId] = chart;
      const [ageArr, ageTotalArr] = arr;
      const option = {
        tooltip: {},
        title: {
          text: "年龄分布", // 设置标题内容
          left:70, // 标题居中
          bottom: 20, // 设置标题位置在饼图的底部
          textStyle: {
            fontSize: 16, // 设置字体大小
            fontWeight: "bold",
          },
        },
        legend: {
          orient: "vertical", // 图例垂直排列
          right: "20%", // 图例放置在右侧
          top: "middle", // 图例垂直居中
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"], // 设置第一个饼图的半径，使其更大
            center: ["25%", "50%"], // 设置第一个饼图的位置，使其居中
           
            data:ageArr ,

            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 3, // 设置边框宽度
              borderColor: "#fff", // 设置边框颜色，使两个饼图有明显的分隔线
            },
          },
          {
            type: "pie",
            radius: ["0%", "30%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data: ageTotalArr,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
        ],
      };
      chart.setOption(option);
    },
    /**
     * 健康体检数据 --- 人群分布图
     */
    initCrewChart(arr) {
      const [ageTotalArr,highSugarArr,diabetesArr,hypertensionArr,oldAgeArr] = arr;
      // const chart = initSvgChart("crew-chart");
      const chartId = 'crew-chart';
			const chart = chartMap[chartId] || initSvgChart(chartId);
      chartMap[chartId] = chart;
      const option = {
        tooltip: {},
        title: {
          text: "人群分布", // 设置标题内容
          left: 70, // 标题居中
          bottom: 20, // 设置标题位置在饼图的底部
          textStyle: {
            fontSize: 16, // 设置字体大小
            fontWeight: "bold",
          },
        },
        legend: {
          orient: "vertical", // 图例垂直排列
          right: "20%", // 图例放置在右侧
          top: "middle", // 图例垂直居中
        },
        series: [
        {
            type: "pie",
            radius: ["50%", "60%"], // 设置第一个饼图的半径，使其更大
            center: ["25%", "50%"], // 设置第一个饼图的位置，使其居中
            data: ageTotalArr,
            label: {
              show: false,
            },
            itemStyle: {
              borderWidth: 3, // 设置边框宽度
              borderColor: "#fff", // 设置边框颜色，使两个饼图有明显的分隔线
            },
          },
        {
            type: "pie",
            radius: ["40%", "50%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data:oldAgeArr,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
          {
            type: "pie",
            radius: ["30%", "40%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data:hypertensionArr,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
         
          {
            type: "pie",
            radius: ["20%", "30%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data:diabetesArr,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
          {
            type: "pie",
            radius: ["0%", "20%"], // 设置第二个饼图的半径，使其更小并位于第一个饼图中心
            center: ["25%", "50%"], // 设置第二个饼图的位置，使其居中
            data:highSugarArr,
            label: {
              show: false, // 隐藏标签，避免重叠
            },
          },
         
        
        
        ],
      };
      chart.setOption(option);
    },
    disposeAllCharts() {
      for (const chartId in chartMap) {
        if (chartMap[chartId]) {
          chartMap[chartId].dispose();
        }
      }
      chartMap = {}; // 清空实例存储
    },
  
  },
  watch: {
    searchForm: {
      handler(val) {
        const { dateRange, period } = val;
        if (dateRange?.length > 0) {
          this.searchForm.period = "全部";
        }
      },
      deep: true,
    },
  },
  beforeUnmount() {
    // 页面销毁前，释放所有图表实例
    this.disposeAllCharts();
  },
  created() {
    chartMap = {};
    this.searchData();
  },
  
 
  mounted() {
    // this.initHealthCheckChart();
    // this.initSatisficationChart();
    // this.initBackFillStatisticsChart();
    // this.initAgeChart();
    // this.initCrewChart();
  },
};
</script>

<style scoped>
#crew-chart,
#age-chart,
#back-fill-statistic,
#disease-distribute,
#satisfy-chart {
  height: 270px;
}
.w-30p {
  width: 30%;
}
.w-40p {
  width: 40%;
}
.w-50p {
  width: 50%;
}
.w-60p {
  width: 60%;
}
.w-70p {
  width: 70%;
}
.chart-containers {
  display: flex;
  flex-wrap: wrap;
}
.container-item {
  width: 49%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
  box-sizing: border-box;
  border-radius: 20px;
}
.chart-containers .container-item:nth-child(2n) {
  margin-right: 0;
}
.d-flex {
  display: flex;
}
.title {
  margin-bottom: 10px;
  margin-left: 10px;
  font-weight: 700;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.p-10 {
  padding: 10px;
}
.px-10 {
  padding: 0 10px;
  margin-bottom: 50px;
}
.overview {
  display: flex;
  flex-wrap: wrap;
}
.overview .view-item {
  border: 1px solid #ccc;
  padding: 16px 48px;
  margin-bottom: 10px;
  width: 50%;
  box-sizing: border-box;
}
.view-item {
  display: flex;
  justify-content: space-between;
}
.view-item .view-title {
  display: inline-block;
  width: 5em;
}
.view-item .view-value {
  display: inline-block;
  text-align: right;
  width: 7em;
}
.overview .view-item:nth-child(2n) {
  border-left: none;
}
</style>
